<script>
import outMain from "@/components/outMain.vue";
import upMoreImg from "@/components/public/upMoreImg.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { EnterpriseAdd, EnterpriseShow, EnterpriseEdit } from "@/http/api";

export default {
  components: { outMain, upMoreImg },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkIntNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkCity = (rule, value, callback) => {
      if (this.formData.is_address === 1) {
        callback();
      } else {
        if (value.length == 2) {
          callback();
        } else {
          callback(new Error("请选择登陆城市"));
        }
      }
    };

    return {
      detailId: this.$route.query.id,
      showCont: false,
      citys: [],
      formData: {
        enterprise_name: "",
        enterprise_person: "",
        enterprise_mobile: "",
        account_money: "",
        enterprise_ktsc: "",
        resume_capture_sum: "",
        is_address: 2,
        xz_address: [],
        enterprise_remark: "",
        enterprise_file: "",
      },
      rules: {
        enterprise_name: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
            min: 1,
            max: 20,
          },
        ],
        enterprise_person: [
          {
            required: true,
            message: "请输入企业负责人",
            trigger: "blur",
            min: 2,
            max: 10,
          },
        ],
        enterprise_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        account_money: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        enterprise_ktsc: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        resume_capture_sum: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        xz_address: [
          {
            validator: checkCity,
            required: true,
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    getImg(url) {
      this.formData.enterprise_file = url;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const queryData = { ...this.formData };
      if (queryData.xz_address.length > 0) {
        queryData.xz_address = queryData.xz_address.join("/");
      }
      const { data } = this.detailId
        ? await EnterpriseEdit(queryData)
        : await EnterpriseAdd(queryData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      EnterpriseShow({ enterprise_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          if (resData.xz_address) {
            resData.xz_address = resData.xz_address.split("/");
          }
          this.formData = resData;
          this.formData["enterprise_id"] = this.detailId;
          this.showCont = true;
        }
      });
    },
  },
  mounted() {},
  async created() {
    this.citys = await this.$city.getCity();
    if (this.detailId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>新增企业账号</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" :model="formData" ref="ruleForm">
          <div class="flexCont" v-if="showCont">
            <el-form-item
              label="企业名称"
              label-width="120"
              prop="enterprise_name"
            >
              <el-input
                clearable
                maxlength="20"
                placeholder="请输入企业名称"
                v-model="formData.enterprise_name"
              />
            </el-form-item>
            <el-form-item
              label="企业负责人"
              label-width="120"
              prop="enterprise_person"
            >
              <el-input
                clearable
                maxlength="10"
                placeholder="请输入企业负责人"
                v-model="formData.enterprise_person"
              />
            </el-form-item>
            <el-form-item
              label="手机号"
              label-width="120"
              prop="enterprise_mobile"
            >
              <el-input
                clearable
                placeholder="请输入手机号"
                v-model="formData.enterprise_mobile"
              />
            </el-form-item>
            <el-form-item
              label="开户费用"
              v-if="!detailId"
              label-width="120"
              prop="account_money"
            >
              <el-input
                clearable
                :disabled="detailId"
                placeholder="请输入开户费用"
                v-model="formData.account_money"
                ><template #append>元</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="开通时长"
              v-if="!detailId"
              label-width="120"
              prop="enterprise_ktsc"
            >
              <el-input
                clearable
                placeholder="请输入开通时长"
                v-model="formData.enterprise_ktsc"
                ><template #append>月</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="精准简历抓取"
              label-width="120"
              prop="resume_capture_sum"
            >
              <el-input
                clearable
                placeholder="请输入赠送的精准简历抓取次数"
                v-model="formData.resume_capture_sum"
                ><template #append>次</template></el-input
              >
            </el-form-item>
            <el-form-item label="地区限制" label-width="120" prop="is_address">
              <el-radio-group v-model="formData.is_address">
                <el-radio :value="2">开启限制</el-radio>
                <el-radio :value="1">关闭限制</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="formData.is_address === 2"
              label="登录地区"
              label-width="120"
              prop="xz_address"
            >
              <el-cascader
                style="width: 100%"
                placeholder="请选择允许的登录地区"
                v-model="formData.xz_address"
                :options="citys"
              />
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="备注信息"
              label-width="120"
              prop="enterprise_remark"
            >
              <el-input
                v-model="formData.enterprise_remark"
                maxlength="3000"
                placeholder="请输入备注信息"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="附件"
              label-width="120"
              prop="enterprise_file"
            >
              <upMoreImg
                :propImgs="formData.enterprise_file"
                @ok="getImg"
              ></upMoreImg>
            </el-form-item>
            <el-form-item class="flexPull" label=" " label-width="120">
              <btn value="确认发布" @ok="saveFn"></btn>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
